<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8"/>
    <title>发送邮件</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<div>
    <form id="mailForm" role="form">
        <div class="form-group">
            <label>邮件发信人:</label>
            <div>
                <input name="from" class="form-control" th:value="${from}"  readonly="readonly">
            </div>
        </div>
        <div>
            <label>邮件收信人:</label>
            <div>
                <input class="form-control" name="to">
            </div>
        </div>
        <div>
            <div>
                <a class="btn btn-success" onclick="sendMail()">发送验证码</a>
                <a class="btn btn-warning" onclick="clearForm()">重新选择</a>
            </div>
        </div>
    </form>

    <script th:inline="javascript">
        var appCtx = [[${#request.getContextPath()}]];

        function sendMail() {

            var formData = new FormData($('#mailForm')[0]);
            $.ajax({
                url: appCtx + '/mail/send',
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (result) {
                    alert(result.status === 'ok' ? "发送成功！" : "发送失败：" + result.error);
                },
                error: function () {
                    alert("发送失败！");
                }
            });
        }

        function clearForm() {
            $('#mailForm')[0].reset();
        }
    </script>
</div>
</body>
</html>